import '../css/public.css'
import { SearchBar } from 'antd-mobile'
import { useNavigate } from "react-router-dom";
import Popular from "../components/Popular";
import ShareBeautiful from "../components/ShareBeautiful";
import { Sticky } from 'react-vant'
const Layout = () => {
    //按钮样式1
    const userInfo = localStorage.getItem('userInfo')
    const { username, avatar } = JSON.parse(userInfo)
    const btnstyled = {
        width: "0.5rem",
        height: "0.3rem",
        fontSize: "0.13rem",
        color: "white",
        marginRight: "0.1rem",
        backgroundColor: "rgb(96,96,224)",
        border: "none",
        borderRadius: "0.05rem"
    }
    //按钮样式2
    const btnstyle = {
        width: "0.5rem",
        height: "0.3rem",
        fontSize: "0.13rem",
        marginRight: "0.1rem",
        backgroundColor: "rgb(250,250,250)",
        border: "none",
        borderRadius: "0.05rem"
    }
    const navigate = useNavigate();
    return (
        <div className="box1" style={{ padding: "0rem 0.2rem 0.5rem 0.2rem" }}>
            <Sticky>
                <div style={{ backgroundColor: "white", height: "2.4rem",width:"100vw" }}>
                    <div style={{ display: "flex", alignItems: "center", paddingTop: "0.1rem" }}>
                        <img src={avatar} alt="" style={{ width: "0.5rem", borderRadius: "50%" }} />
                        <p style={{ marginLeft: "0.2rem", fontSize: "0.16rem" }}>你好，{username}</p>
                    </div>
                    <div style={{ marginTop: "0.2rem" }}>
                        <p style={{ marginBottom: "0.05rem", fontSize: "0.22rem" }}>欢迎来到皮肤护理美容社</p>
                        <p style={{ fontSize: "0.12rem", color: "#999" }}>提出问题，参加挑战并获得像您这样的人的推荐</p>
                    </div>
                    <div style={{ marginTop: "0.08rem" }}>
                        <SearchBar
                            placeholder='搜索或提问'
                            onFocus={() => {
                                navigate('/search')
                            }}
                            style={{width:"90%"}}
                        />
                    </div>
                    <div style={{ margin: "0.1rem 0rem 0rem 0rem ", display: "flex" }} >
                        <button style={btnstyled}>全部</button>
                        <button style={btnstyle}>热门</button>
                        <button style={btnstyle}>团购</button>
                        <button style={btnstyle}>会员</button>
                        <button style={btnstyle}>图册</button>
                    </div>
                </div>
            </Sticky>
            <div>
                <Popular />
            </div>
            <div>
                <ShareBeautiful />
            </div>
        </div>
    )
}


export default Layout;